<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<jsp:include page="../common/dwrEasyui.jsp"></jsp:include>
	<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/roleDao.js'></script>
	<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/roleQueryService.js'></script>
	<script type="text/javascript">
	var datagrid;

	var north;
	var south;

	//工具条添加按钮
	var add_btn;
	//工具条编辑按钮
	var edit_btn;
	//删除按钮
	var del_btn;
	//工具条批量删除按钮
	var batch_del_btn;
	//主tab页
	var mainTab;
	//tabs面板
	var tabs;
	//选择卡列表
	var tablist;
	//主tab页表单
	var mainForm;
	//主tab页表单保存按钮
	var mainForm_btnSave;
	//主tab页取消按钮
	var mainForm_btnCancel;

	var colums = [ [ {
		field : "ROLE_ID",
		checkbox : true
	}, {
		field : "ROLE_NAME",
		title : '角色名称',
		width : 80,
		sortable : true
	}, {
		field : "ROLE_DESC",
		title : '角色描述',
		width : 300,
		sortable : true
	}, {
		field : "ORG_ID",
		title : '机构ID',
		width : 100,
		sortable : true
	}, {
		field : "ROLE_TYPE",
		title : '角色类型',
		width : 100,
		sortable : true
	}, {
		field : "ROLE_ENABLED",
		title : '是否可用',
		width : 100,
		sortable : true,
		formatter: sy.dgYNFormatter
	}, {
		field : "ROLE_GRANT",
		title : '是否可以向下授权',
		width : 180,
		sortable : true,
		formatter: sy.dgYNFormatter
	} ] ];
	
	$(function() {
		south = $("#layout").layout("panel","south");
		datagrid = $("#datagrid").datagrid( {
			url : roleQueryService.query,
			toolbar : '#gridToolbar',
			idField : 'ROLE_ID',
			columns : colums,
			pagination : true,
			pageSize : 10,
			pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
			fit : true,
			fitColumns : true,
			nowrap : false,
			border : false,
			singleSelect : true,
			selectOnCheck : false,
			checkOnSelect : false,
			onSelect: datagridOnSelect,
			onLoadSuccess: datagridOnLoadSuccess
		});
		//表单
		mainForm = $("#mainForm").form({});
		//表单保存按钮+操作
		mainForm_btnSave = $('#mainForm_btnSave').linkbutton("click",mainFormSaveFunc);
		//表单取消按钮+操作
		mainForm_btnCancel = $('#mainForm_btnCancel').linkbutton("click",mainFormCancleFunc);
		//表单设置为只读状态
		mainForm.form("readMode", {
			flag : true,
			func : function() {
				mainForm_btnSave.linkbutton('disable')
				mainForm_btnCancel.linkbutton('disable')
			}
		});

		//编辑按钮
		edit_btn = $("#edit_btn").linkbutton("click",function(){
				var rowData = datagrid.datagrid("getSelected");
				tabs.tabs("disableWithinSel");
				if(rowData == null){
					$.messager.alert('警告','请先选中行','error');
					return;
				}
				south.panel("maximize");
				mainForm.form("readMode", {
						flag:false,
						func:function() {
							mainForm_btnSave.linkbutton('enable')
							mainForm_btnCancel.linkbutton('enable')
						}
					});
				/*
				var record = {};
				for ( var k in rowData) {
					record[k.toLowerCase()] = rowData[k];
				}
				*/
				
				roleDao.loadByID(rowData.ROLE_ID,function(data){
						console.dir(data);
						mainForm.form("clear");
						mainForm.form("load", data);
				});
			});
		//添加按钮与操作
		add_btn = $("#add_btn").linkbutton("click",function(){
				tabs.tabs("disableWithinSel");
				south.panel("maximize");
				mainForm.form("clear");
				mainForm.form("readMode", {
					flag:false,
					func:function() {
						mainForm_btnSave.linkbutton('enable');
						mainForm_btnCancel.linkbutton('enable');
					}
				});
			});
		del_btn = $("#del_btn").linkbutton("click",function(){
				var rowData = datagrid.datagrid("getSelected");
				$.messager.confirm("确认","您确定要删除所选中的记录吗？",function(){
					roleDao.deleteByID(rowData.ROLE_ID,function(data){
						$.messager.alert("提示","删除成功","info",function(){
								datagrid.datagrid("reload");
							});
					});
				});
			});
		//批量删除按钮与操作
		batch_del_btn = $("#batch_del_btn").linkbutton("click",function(){
				//得到表单的所选行checked
				var rowDatas = datagrid.datagrid("getChecked");
				alert("要删除的记录条数:" + rowDatas.length);
			});
		
		tabs = $("#tabs");
		tabList = tabs.tabs("tabs");
		mainTab = $("#mainTab");
		/*
		var tabPanels = tabs.tabs("tabs");
		alert(tabPanels.length);
		for(var i=0; i<tabPanels.length;i++){
			console.dir(tabPanels[i].panel('options'));
		}
		*/
		authManager();

		//查询按钮
		var searchButton = $("#searchButton").linkbutton("click",function(){
				//var condition = sy.listFormCondition("searchForm");
				var con1 = new Condition("role_name","like","3");
				var con2 = new Condition("role_name", "like", "2");
				var or = new And(con1,con2);
				datagrid.gridFilter(or);
			});
	});

	//datagrid行选择时的事件
	var datagridOnSelect = function(rowIndex, rowData) {
		//这里应该刷新每一个TAB页
		roleDao.loadByID(rowData.ROLE_ID,function(data){
			mainForm.form("clear");
			mainForm.form("load", data);
		});
	}
	var datagridOnLoadSuccess = function(data) {
		if(data.total > 0){
			datagrid.datagrid("selectRow", 0);
		}else{
			mainForm.form("clear");
		}
	}

	//表单保存按钮点击执行的方法
	var mainFormSaveFunc = function() {
		var json = sy.formToJSON("mainForm");
		if(json.role_id == null || json.role_id == ""){
			//新增
			roleDao.insertRecord(json,function(data){
				$.messager.alert("提示","新增成功!","info");
				southPanelRestore();
				datagrid.datagrid("reload");
			});
		}else{
			//更新
			roleDao.updateRecord(json,function(data){
				$.messager.alert("提示","更新成功!","info");
				southPanelRestore();
				datagrid.datagrid("reload");
			});
		}
	}

	//表单取消按钮点击执行的方法
	var mainFormCancleFunc = function() {
		southPanelRestore();
		datagrid.datagrid("reload");
		//放开所有的tab
		tabs.tabs("enableAll");
	}

	//布局恢复方法
	var southPanelRestore = function(){
		south.panel("restore");
		mainForm.form("readMode", {
			flag : true,
			func : function() {
				mainForm_btnSave.linkbutton('disable');
				mainForm_btnCancel.linkbutton('disable');
			}
		});
	}

	//权限前台过滤
	var authManager = function(){
		//tabs.tabs("removeByTPId","mainTab");
	}

	function clearSearchForm(){
		$('#searchForm').form('clear');
	}

</script>
  </head>
  
  <body id="layout" class="easyui-layout" data-options="fit:true">
  
  	<div data-options="region:'center',split:true" style="padding:5px;background:#eee;">
	    <div id="gridToolbar" style="padding:5px;height:auto;margin-bottom:5px">
	    	<table>
	    		<tr>
	    		<td>
	    			<a id="add_btn" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
	    		</td>
	    		<td>
	    			<div class="datagrid-btn-separator"></div>
	    		</td>
	    		<td>
	    			<a id="edit_btn" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
	    		</td>
	            <td>
	    			<div class="datagrid-btn-separator"></div>
	    		</td>
	            <td>
	            	<a id="del_btn" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">删除</a>
	            </td>
	            <td>
	    			<div class="datagrid-btn-separator"></div>
	    		</td>
	            <td>
	            	<a id="batch_del_btn" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true">批量删除</a>
	            </td>
	            <td>
	    			<div class="datagrid-btn-separator"></div>
	    		</td>
	    		<td>
	    			<form id="searchForm">
	    				角色名称：
	    				<input type="hidden" name="role_name.oper" value="like"/>
	    				<input type="text" name="role_name.value1" style="width:80px"/>
	    				角色类型：
<%--	    				<input type="hidden" name="" value="like"/>--%>
<%--	    				<input type="text" name="xxx.value1" class="easyui-datebox" style="width:80px"/>--%>
<%--			          	Date From: <input class="easyui-datebox" style="width:80px">--%>
<%--			            To: <input class="easyui-datebox" style="width:80px">--%>
<%--			            Language: --%>
<%--			            <select class="easyui-combobox" panelHeight="auto" style="width:100px">--%>
<%--			                <option value="java">Java</option>--%>
<%--			                <option value="c">C</option>--%>
<%--			                <option value="basic">Basic</option>--%>
<%--			                <option value="perl">Perl</option>--%>
<%--			                <option value="python">Python</option>--%>
<%--			            </select>--%>
			            <a id="searchButton" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search">Search</a>
			            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearSearchForm();">清空</a>
	   				</form>
	    		</td>
	   			</tr>
	   		</table>
	    </div>
	    <table id="datagrid"></table>
     </div>
     
     <div data-options="region:'south',split:true" style="height:200px;overflow: hidden;">
     	<div id="tabs" class="easyui-tabs" data-options="fit:true">
		    <div title="主页面" id="mainTab">
		    	<div id="panel" toolbar="#toolbar" fit="true">
					<div id="toolbar" class="datagrid-toolbar">
					   <a href="javascript:void(0)" class="easyui-linkbutton" id="mainForm_btnSave" iconCls="icon-save" plain="true">保存</a>
					   <div class="datagrid-btn-separator"></div>
					   <a href="javascript:void(0)" class="easyui-linkbutton" id="mainForm_btnCancel" iconCls="icon-cancel" plain="true">取消</a>
					</div>
					<form id="mainForm" method="post">
						<input type="hidden" name="role_id" >
						<table class="tableForm">
							<tr>
								<td>角色名称</td>
								<td><input class="easyui-validatebox" type="text" name="role_name" data-options="required:true"/></td>
								<td>角色描述</td>
								<td><input type="text" name="role_desc"/></td>
							</tr>
							<tr>
								<td>
									机构
								</td>
								<td>
									<input type="text" id="mainForm_org_id" name="org_id">
								</td>
								<td>
									角色类型
								</td>
								<td>
									<select class="easyui-combobox" name="role_type" style="width:200px;">
									    <option value="1">普通角色</option>
									    <option value="2">管理员角色</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>
									是否可用
								</td>
								<td>
									<select class="easyui-combobox" name="role_enabled" style="width:200px;">
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</td>
								<td>
									是否可向下级授权
								</td>
								<td>
									<select class="easyui-combobox" name="role_grant" style="width:200px;">
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</td>
							</tr>
						</table>
					</form>
				</div>
		    </div>
		    <div title="tab2" style="" id="tab2"></div>
		</div>
     </div>
  </body>
</html>
